<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>单图zoomify</title>
	<link rel="stylesheet" href="./zoomify.min.css">
	<!-- 演示地址 https://www.dowebok.com/demo/214/index4.html -->
	<style>
		.img-box {
			width: 20em;
			height: auto;
		}

		.img-box img {
			width: 100%;
			height: 100%;
		}
	</style>

</head>

<body>
	<div class="img-box">
		<img src="https://56hy-1302659776.cos.ap-guangzhou.myqcloud.com/5fd1f0b760970.jpg" alt="5fd1f0b760970.jpg"
			class="zoomify" />
	</div>
</body>
<script src="../jq/jquery-3.5.1.min.js"></script>
<script src="./zoomify.min.js"></script>
<script>
	// 单图放大预览的
	$(function () {
		$('.zoomify').zoomify(
			// {
			// 	duration: 200, 		//	整数	200	动画持续时间
			// 	easing: 'linear', 	// 字符串	linear	动画持续时间
			// 	scale: 0.9 			// 整数/浮点数	0.9	图片最大缩放比例
			// }
		);
	})
</script>

</html>